<template>
	<view class="action-buttons">
		<!-- 关注按钮 -->
        <view class="action-item" @click="handleFollow">
            <view class="avatar-wrapper">
                <image class="avatar" :src="videoData.authorAvatar || defaultAvatar" mode="aspectFill"></image>
                <view class="follow-badge" v-if="!videoData.isFollowed">
                    <uni-icons type="plus" :size="18" color="#fff"></uni-icons>
                </view>
            </view>
        </view>
		
		<!-- 点赞按钮 -->
		<view class="action-item" @click="handleLike">
			<view class="icon-wrapper" :class="{ active: videoData.isLiked }">
                <uni-icons :type="videoData.isLiked ? 'heart-filled' : 'heart'" :size="40" :color="videoData.isLiked ? '#ff2442' : '#fff'"></uni-icons>
			</view>
			<text class="action-count">{{ formatCount(videoData.likeCount) }}</text>
		</view>
		
		<!-- 评论按钮 -->
		<view class="action-item" @click="handleComment">
			<view class="icon-wrapper">
                <uni-icons type="chatbubble" :size="40" color="#fff"></uni-icons>
			</view>
			<text class="action-count">{{ formatCount(videoData.commentCount) }}</text>
		</view>
		
		<!-- 收藏按钮 -->
		<view class="action-item" @click="handleFavorite">
			<view class="icon-wrapper" :class="{ active: videoData.isFavorited }">
                <uni-icons :type="videoData.isFavorited ? 'star-filled' : 'star'" :size="40" :color="videoData.isFavorited ? '#ffb02e' : '#fff'"></uni-icons>
			</view>
			<text class="action-count">{{ formatCount(videoData.favoriteCount) }}</text>
		</view>
		
		<!-- 分享按钮 -->
		<view class="action-item" @click="handleShare">
			<view class="icon-wrapper">
                <uni-icons type="redo" :size="40" color="#fff"></uni-icons>
			</view>
			<text class="action-count">{{ formatCount(videoData.shareCount) }}</text>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
	videoData: {
		type: Object,
		required: true
	}
})

const emit = defineEmits(['follow', 'like', 'comment', 'favorite', 'share'])

const defaultAvatar = 'https://picsum.photos/96'

const formatCount = (count) => {
	if (count >= 10000) {
		return (count / 10000).toFixed(1) + '万'
	}
	return count.toString()
}

const handleFollow = () => {
	emit('follow', props.videoData)
}

const handleLike = () => {
	emit('like', props.videoData)
}

const handleComment = () => {
	emit('comment', props.videoData)
}

const handleFavorite = () => {
	emit('favorite', props.videoData)
}

const handleShare = () => {
	emit('share', props.videoData)
}
</script>

<style scoped lang="scss">
.action-buttons {
	position: absolute;
	right: 24rpx;
	bottom: 220rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	z-index: 10;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 36rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.avatar-wrapper {
	position: relative;
	width: 72rpx;
	height: 72rpx;
	border-radius: 50%;
	overflow: hidden;
	border: 3rpx solid #fff;
}

.avatar {
	width: 100%;
	height: 100%;
}

.follow-badge {
    position: absolute;
    bottom: -14rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 36rpx;
    height: 36rpx;
    background: #ff2442;
    border: 3rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-wrapper {
	width: 72rpx;
	height: 72rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	
	&.active {
		animation: scaleAnimation 0.3s ease;
	}
}

@keyframes scaleAnimation {
	0% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.2);
	}
	100% {
		transform: scale(1);
	}
}

.action-count {
	margin-top: 8rpx;
	font-size: 22rpx;
	color: #fff;
	font-weight: 500;
}
</style>

